<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>toast消息提示</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div>
    <button onclick="toast.show('这是一条基础消息', { position: 'top' })">显示短消息</button>
    <button onclick="toast.show('这是一个提示信息', { type: 'info', position: 'top' })">显示短消息</button>
    <button onclick="toast.show('这是一个稍微长一点的消息，看看效果如何，应该能够自适应宽度', { type: 'success', position: 'top' })">显示长消息</button>
    <button onclick="toast.show('这是一个非常非常长的消息，当内容超过最大宽度限制时，文本应该会自动换行显示，而不是继续扩展宽度', { type: 'warning', position: 'top' })">显示超长消息</button>
    <button onclick="toast.show('文本应该会自动换行显示，而不是继续扩展宽度,这是一个非常非常长的消息，当内容超过最大宽度限制时，内容过长需要换行，内容过长需要换行，内容过长需要换行，内容过长需要换行，内容过长需要换行', { type: 'error', position: 'top' })">显示超长消息</button>
  </div>
  <p>.</p>
  <div>
    <button onclick="toast.show('这是一条基础消息', { position: 'center' })">显示短消息</button>
    <button onclick="toast.show('这是一个提示信息', { type: 'info', position: 'center' })">显示短消息</button>
    <button onclick="toast.show('这是一个稍微长一点的消息，看看效果如何，应该能够自适应宽度', { type: 'success', position: 'center' })">显示长消息</button>
    <button onclick="toast.show('这是一个非常非常长的消息，当内容超过最大宽度限制时，文本应该会自动换行显示，而不是继续扩展宽度', { type: 'warning', position: 'center' })">显示超长消息</button>
    <button onclick="toast.show('文本应该会自动换行显示，而不是继续扩展宽度,这是一个非常非常长的消息，当内容超过最大宽度限制时，内容过长需要换行，内容过长需要换行，内容过长需要换行，内容过长需要换行，内容过长需要换行', { type: 'error', position: 'center' })">显示超长消息</button>
  </div>
  <p>.</p>
  <div>
    <button onclick="toast.show('这是一条基础消息', { position: 'bottom' })">显示短消息</button>
    <button onclick="toast.show('这是一个提示信息', { type: 'info', position: 'bottom' })">显示短消息</button>
    <button onclick="toast.show('这是一个稍微长一点的消息，看看效果如何，应该能够自适应宽度', { type: 'success', position: 'bottom' })">显示长消息</button>
    <button onclick="toast.show('这是一个非常非常长的消息，当内容超过最大宽度限制时，文本应该会自动换行显示，而不是继续扩展宽度', { type: 'warning', position: 'bottom' })">显示超长消息</button>
    <button onclick="toast.show('文本应该会自动换行显示，而不是继续扩展宽度,这是一个非常非常长的消息，当内容超过最大宽度限制时，内容过长需要换行，内容过长需要换行，内容过长需要换行，内容过长需要换行，内容过长需要换行', { type: 'error', position: 'bottom' })">显示超长消息</button>
  </div>

  <script src="./index.js"></script>
</body>
</html>